import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
} from 'react-native';


var rowData = {
    title: 'title啪啪啪',
    source: 'source咔咔咔',
    ptime: 'ptime哒哒哒',
};

export default class FriendsPage extends Component {
    render() {
        return (
            <View>
                <Image resizeMode="contain" style={{ width: 100, height: 140 }}
                    source={{ uri: 'http://img.muji.com.cn/img/item/4549738391210_400.jpg' }}>
                    <Text numberOfLines={1} style={{ marginTop: 50, opacity: 0.9, backgroundColor: '#FF7700' }}>下面是背景图</Text>
                </Image>
                <TouchableOpacity style={styles.cellStyle}>
                    <Image
                        source={{ uri: 'http://img.muji.com.cn/img/item/4549738391210_400.jpg' }}
                        style={styles.imgStyle}
                    />
                    <View style={styles.rightViewStyle}>
                        <Text
                            numberOfLines={2}
                        >
                            {rowData.title}
                        </Text>
                        <Text
                            numberOfLines={2}
                        >
                            {rowData.title}
                        </Text>
                        <View style={styles.rightInnerViewStyle}>
                            <Text style={{ color: 'red', fontSize: 14 }}>{rowData.source}</Text>
                            <Text style={{ color: '#333', fontSize: 14 }}>{rowData.ptime}</Text>
                        </View>
                    </View>
                </TouchableOpacity>

                <View style={styles.container}>
                    <Image
                        style={styles.backdrop}
                        //source={{ uri: 'https://unsplash.com/photos/JWiMShWiF14/download' }}
                        source={require('../img/photo.jpg')}
                    >
                        <View style={styles.backdropView}>
                            <Text style={styles.headline}>Headline</Text>
                        </View>
                    </Image>
                </View>

            </View>

        );
    }
}

//样式定义
const styles = StyleSheet.create({
    cellStyle: {
        borderBottomWidth: 1,
        borderBottomColor: '#666',

        flexDirection: 'row',
        padding: 10
    },

    imgStyle: {
        width: 90,
        height: 90,
        borderRadius: 5,
        marginRight: 10
    },

    rightViewStyle: {
        flex: 1,
        justifyContent: 'space-around'
    },

    rightInnerViewStyle: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },


    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: '#000000',
        width: 320
    },
    backdrop: {
        paddingTop: 60,
        width: 320,
        height: 120
    },
    backdropView: {
        height: 120,
        width: 320,
        backgroundColor: 'rgba(0,0,0,0)',
    },
    headline: {
        fontSize: 20,
        textAlign: 'center',
        backgroundColor: 'rgba(0,0,0,0)',
        color: 'white'
    }

});